import { createApp } from "vue";
import { createPinia, PiniaPlugin } from "pinia";
import App from "./App.vue";

// 创建 Pinia 实例
const pinia = createPinia();

/**
 * 定义一个 pinia 的插件
 *    插件函数的执行，会在某个仓库被 Pinia 管理的时候触发
 * @param context
 */
const plugin1: PiniaPlugin = (context) => {
  // console.log("plugin1", context.store);

  // 返回一个对象，对象中的属性就会写入到当前触发该插件的仓库实例的静态属性上
  return { a: 1 };
};

const plugin2: PiniaPlugin = (context) => {
  // console.log("context", context);
};

/**
 * 用于实现数据的持久化存储
 *    1. 什么时候存
 *       context.store.$subscribe
 *    2. 什么时候取
 *       context.store.$patch
 */
const plugin3: PiniaPlugin = (context) => {
  if (!context.options.needSave) return;

  const key = context.store.$id;

  // 获取存储的内容
  const state = localStorage.getItem(key);
  if (state) {
    // 操作赋值
    context.store.$patch(JSON.parse(state));
  }

  context.store.$subscribe((mutation, state) => {
    console.log("start 存", state);

    localStorage.setItem(key, JSON.stringify(state));
  });
};

// 注册 pinia 的插件
pinia.use(plugin1).use(plugin2).use(plugin3);

createApp(App).use(pinia).mount("#app");
